<template>
  <div>
    <div class="title">
      <text class="title-item">统计时间</text>
      <radio  v-model="selectedValue"
              :items="items"
              selectedColor="#979797"
              fontSize="29"
              iconSize="32"
              color="#3EAFFC"
              @afterChange="onSelect"></radio>
    </div>
    <wxc-tab-bar  :tab-titles="tabTitles"
                  :tab-styles="tabStyles"
                  title-type="text">
      <div class="item-container">
        <grid :head="gridHead" :grid="gridData"/>
      </div>
      <div class="item-container">
        <bmchart :options="$format(lineChartInfo)" style="flex:1;"></bmchart>
      </div>
      <div class="item-container">
        <bmchart :options="$format(barChartInfo)" style="flex:1;"></bmchart>
      </div>
      <div class="item-container">
        <bmchart :options="$format(cycleInfoCO2)" style="flex:1;"></bmchart>
        <bmchart :options="$format(cycleInfoSO2)" style="flex:1;"></bmchart>
      </div>
    </wxc-tab-bar>
  </div>
</template>

<style scoped>
  .item-container {
    width: 750px;
  }
  .title {
    flex-direction: row;
    align-items: center;
    background-color: white;
  }
  .title-item {
    color: #3EAFFC;
    padding: 0 15px;
  }
</style>
<script>
  import WxcTabBar from '@/components/tabBar'
  import radio from '@/components/radio'
  import grid from '@/components/scrollGrid'
  import ajax from '@/net/reduceAnalysis'
  import { CTCE_USER_INFO } from '@/config/storageTypes.js'
  import { getCache } from '@/util/storageUtils'

  export default {
    components: { WxcTabBar, radio, grid },
    data () {
      return {
        adcd: '',
        tabTitles: [
          {
            title: '统计报表'
          },
          {
            title: '折线图'
          },
          {
            title: '柱状图'
          },
          {
            title: '饼状图'
          }
        ],
        tabStyles: {
          bgColor: '#FFFFFF',
          titleColor: 'rgba(204,204,204,1)',
          activeTitleColor: '#FFFFFF',
          activeBgColor: 'rgba(62,175,252,1)',
          width: 187.5,
          height: 70,
          fontSize: 29,
        },
        selectedValue:"1",
        items:[
          { value:"1", title:'年' },
          { value:"2", title:'月' },
          { value:"3", title:'日' }
        ],
        gridHead: [
          { name: 'XZQHMC', value: '行政区划'},
          { name: 'CNT', value: '安装数量'},
          { name: 'WRW1', value: '二氧化碳减排量(吨)'},
          { name: 'WRW2', value: '二氧化硫减排量(吨)'},
          { name: 'WRW3', value: '粉尘减排量(吨)'},
          { name: 'WRW4', value: '氮氧化物减排量(吨)'}
        ],
        gridData: []
      }
    },
    computed: {
      xData () {
        return this.getItemArr('XZQHMC')
      },
      CO2 () {
        return this.getItemArr('WRW1')
      },
      SO2 () {
        return this.getItemArr('WRW2')
      },
      dust () {
        return this.getItemArr('WRW3')
      },
      HO () {
        return this.getItemArr('WRW4')
      },
      CO2Pie () {
        return this.getPieArr('WRW1')
      },
      SO2Pie () {
        return this.getPieArr('WRW2')
      },
      lineChartInfo () {
        return {
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              data: ['二氧化碳', '二氧化硫', '粉尘', '氮氧化物']
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.xData
          },
          yAxis: {
              type: 'value'
          },
          series: [
            {
                name: '二氧化碳',
                type: 'line',
                data: this.CO2
            },
            {
                name: '二氧化硫',
                type: 'line',
                data: this.SO2
            },
            {
                name: '粉尘',
                type: 'line',
                data: this.dust
            },
            {
                name: '氮氧化物',
                type: 'line',
                data: this.HO
            }
          ]
        }
      },
      barChartInfo () {
        return {
          legend: {
            data: ['二氧化碳', '二氧化硫', '粉尘', '氮氧化物']
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.xData,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '二氧化碳',
              type: 'bar',
              data: this.CO2
            },
            {
              name: '二氧化硫',
              type: 'bar',
              data: this.SO2
            },
            {
              name: '粉尘',
              type: 'bar',
              data: this.dust
            },
            {
              name: '氮氧化物',
              type: 'bar',
              data: this.HO
            }
          ]
        }
      },
      cycleInfoCO2 () {
        return {
          title: {
              text: '二氧化碳减排量(吨)',
              right: '2%',
              top: '2%'
          },
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          series: [
            {
              name: '二氧化碳减排量(吨)',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: this.CO2Pie
            }
          ]
        }
      },
      cycleInfoSO2 () {
        return {
          title: {
              text: '二氧化硫减排量(吨)',
              right: '2%',
              top: '2%'
          },
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          series: [
            {
              name: '二氧化硫减排量(吨)',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: this.SO2Pie
            }
          ]
        }
      }
    },
    methods: {
      loadData () {
        this.$notice.loading.show()
        ajax.getData({
          quyxzqhdm: this.adcd,
          T0LB: this.selectedValue
        }).then(res => { 
          this.gridData = res.datalist
          this.$nextTick(() => {
            this.$notice.loading.hide()
          })
        })
      },
      onSelect () {
        this.loadData()
      },
      getItemArr (str) {
        let arr = []
        this.gridData.forEach((value, index) => {
          if (index !== 0) {
            arr.push(value[str])
          }
        })
        return arr
      },
      getPieArr (str) {
        let arr = []
        this.gridData.forEach((value, index) => {
          if (index !== 0) {
            arr.push({
              name: value.XZQHMC,
              value: value[str]
            })
          }
        })
        return arr
      }
    },
    beforeCreate () {
      this.$notice.loading.show()
      this.$navigator.setLeftItem({
        text: '   ',
        fontSize: '40',
        fontWeight: 'bold'
      }, () => {
        this.$router.back()
      })
    },
    created () {
      getCache(CTCE_USER_INFO).then(res => {
        const info = JSON.parse(res)
        this.adcd = info.xzqhdm
        this.loadData() 
      })
    }
  }
</script>
